<template>
    <div class="content" v-loading="loading">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
            <el-form-item label="关键词" prop="keyword">
                <el-input style="width:300px" v-model="queryParams.keyword" placeholder="请输入关键词" clearable />
            </el-form-item>
            <el-form-item label="报告时间">
                <el-form-item label-width="0px">
                    <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date" placeholder="开始时间"
                        value-format="YYYY-MM-DD" :disabled-date="startDisableDate"/>
                </el-form-item>
                <span class="spanStyle">至</span>
                <el-form-item>
                    <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date" placeholder="结束时间"
                        value-format="YYYY-MM-DD" :disabled-date="endDisableDate"/>
                </el-form-item>
            </el-form-item>
            <el-form-item label="报告名称" prop="achievementName">
                <el-input style="width:300px" v-model="queryParams.achievementName" placeholder="请输入名称" clearable />
            </el-form-item>
            <el-row>
              <el-col style="text-align: center">
                <el-form-item>
                  <el-button type="primary" @click="handleQuery">搜索</el-button>
                  <el-button type="primary" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>

        <div v-if="dataList.length > 0" class="listStyle">
            <div v-for="item, index in dataList" :key="index" class="divStyle">
                <div class="dwBtn">
                    <el-button size="small" @click="toView(item)">预览</el-button>
                    <el-button size="small" @click="handleDown(item)">下载</el-button>
                </div>
                <img :src="reportImage" alt="" class="img">
                <div style="margin-inline-start:0px;margin-top: 20px;">
                    <p class="lhStyle" style="font-size: 20px;font-weight: bold;color: #333;">
                        <el-tooltip effect="customized" :content="item.achievementName" placement="bottom">
                            <span style="cursor: pointer;">{{ item.achievementName }}</span>
                        </el-tooltip>
                    </p>
                    <p class="lhStyle" style="margin:10px 0px">
                        <span style="font-size: 14px;color: #333">关键词:</span>
                        <template v-if="item.keyword">
                            <el-tooltip effect="customized" :content="item.keyword" placement="bottom">
                                <span>
                                    <el-tag effect="plain" style="margin-left: 15px;font-size: 14px;" v-for="key in item.keyword.split(',')">{{ key }}</el-tag>
                                </span>
                            </el-tooltip>
                        </template>
                        <template v-else>
                            <span style="margin-left: 15px;font-size: 14px;color: #666;">无</span>
                        </template>
                    </p>
                    <p class="lhStyle">{{ item.publishingUnit }}<span style="margin-left: 30px;">{{ item.achievementDate
                    }}</span>
                    </p>
                </div>
            </div>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
                @pagination="getList" />
        </div>

        <el-empty :image-size="200" v-else />
    </div>
</template>
  
<script setup name="earthDamageLossPreEvaluation">
import { getAllList } from '@/api/informationResult/evaluationReport/earthDamageLossPreEvaluation';
import reportImage from "@/assets/icon/reportImg.png"
import { useRoute } from 'vue-router';
import {checkPermi} from "@/utils/permissionBtn"
import {useWebsocket} from "@/utils/socket"

const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";
const router = useRouter()
const loading = ref(false);
const dataList = ref([]);
const total = ref(0);

const data = reactive({
    queryParams: {
        page: 1,
        rows: 12,
        keyword: undefined,
        startTime: undefined,
        endTime: undefined,
        achievementName: undefined,
        achievementColumn: '地震灾害损失评估',
        releaseStatus:0,
    },
    form: {
    },
})
const { queryParams } = toRefs(data);

const toView = (item) =>{
    let flag = true;
    flag = checkPermi(item.dataOrigin,'look',item.achievementName,'评估报告')
    if(!flag){
      proxy.$modal.msgWarning("暂无权限查看");
      return;
    }
    const routeUrl = router.resolve({
        path: "/viewItemFile",
        query: { id: item.achievementUpload, name: item.achievementName },
      });
      window.open(routeUrl.href, "_blank");
}

// 下载文件
function handleDown(item) {
    let flag = true;
    flag = checkPermi(item.dataOrigin,'dowon',item.achievementName,'评估报告')
    if(!flag){
      proxy.$modal.msgWarning("暂无权限下载");
      return;
    }
    var query = {
        attachId: item.achievementUpload,
        name: item.attachName,
    }
    if(item.dataOrigin==0||item.dataOrigin==5||item.dataOrigin==6||item.dataOrigin==10){
        location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
    }else{
        location.href =  import.meta.env.VITE_APP_BASE_API + "/other/Download" + '?id=' + query.attachId + '&name=' + query.name + '&dataOrigin='+item.dataOrigin;
    }
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    queryParams.value.startTime = undefined;
    queryParams.value.endTime = undefined;
    handleQuery();
}

// 时间可选范围控制
const startDisableDate = (time) => {
	let endDateVal = queryParams.value.endTime;
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime();
	}
};
const endDisableDate = (time) => {
	let beginDateVal = queryParams.value.startTime;;
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime();
	}
};

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        dataList.value.forEach(item=>{
            if(item.achievementName.includes('.doc')||item.achievementName.includes('.xls')||item.achievementName.includes('.pdf')){
                item.achievementName = item.achievementName.split('.')[0]
            }
        })
        total.value = response.data.total;
        loading.value = false;
    }).catch(err=>{loading.value = false});
}
// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='infAchievement'){
        getAllList({ ...queryParams.value }).then(response => {
            dataList.value = response.data.rows ? response.data.rows : [];
            dataList.value.forEach(item=>{
                if(item.achievementName.includes('.doc')||item.achievementName.includes('.xls')||item.achievementName.includes('.pdf')){
                    item.achievementName = item.achievementName.split('.')[0]
                }
            })
            total.value = response.data.total;
        }).catch(err=>{});
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});
getList();
</script>
  
<style scoped lang="scss">
.content {
    margin-top: 20px;
}

.el-form--inline .el-form-item {
    margin-right: 0px !important;
}

.spanStyle {
    display: inline-block;
    width: 20px;
    text-align: center;
}

.img {
    width: 320px;
    box-sizing: border-box;
    margin: 0 auto;
}

.lhStyle {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    white-space: nowrap; // 规定段落中的文本不进行换行
}

.listStyle {
    padding-top: 30px;
    margin-top: -18px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 60px;

    .divStyle {
        width: 360px;
        display: flex;
        flex-direction: column;
        position: relative;
        box-shadow: 0 0 6px 3px #e3e6ea;
        padding: 20px;
        .dwBtn {
            position: absolute;
            right: 30px;
            top: 230px;
        }
    }
}
:deep(.pagination-container){
    .el-pagination__sizes{
        display: none;
    }
}
.el-tag{
    color: #107ce5;
    border-color: #107ce5;
    cursor: pointer;
  }
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
	background: #dddfe5;
}

.el-popper.is-customized .el-popper__arrow::before {
	background: #dddfe5;
}
</style>